<template>
  <div class="dashboard-content">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="card in statsCards" :key="card.title">
        <el-card class="stats-card" :body-style="{ padding: '15px' }">
          <div class="stats-value">{{ card.value }}</div>
          <div class="stats-title">{{ card.title }}</div>
          <el-icon class="stats-icon"><component :is="card.icon" /></el-icon>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要内容区域 - 1:3 比例布局，对应上方卡片布局 -->
    <el-row :gutter="20" class="main-content-row">
      <!-- 左侧面板 - 待办事项和最近操作文件（占1格宽度） -->
      <el-col :span="6">
        <!-- 待办事项 -->
        <el-card class="todo-card" :body-style="{ padding: '0px' }">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-button link @click="addNewTodo">添加</el-button>
            </div>
          </template>
          <el-scrollbar height="290px">
            <div class="todo-list">
              <div v-for="(todo, index) in todoList" :key="index" class="todo-item">
                <el-checkbox v-model="todo.completed" @change="toggleTodoStatus(index)">
                  <span :class="{ 'completed': todo.completed }">{{ todo.content }}</span>
                </el-checkbox>
                <div class="todo-actions">
                  <span class="todo-date">{{ todo.date }}</span>
                  <el-button size="small" link type="danger" @click="deleteTodo(index)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
              <div v-if="todoList.length === 0" class="empty-placeholder">
                暂无待办事项，点击添加按钮创建新任务
              </div>
            </div>
          </el-scrollbar>
        </el-card>

        <!-- 最近操作文件 -->
        <el-card class="recent-files-card" :body-style="{ padding: '0px' }">
          <template #header>
            <div class="card-header">
              <span>最近操作文件</span>
              <el-button link>查看全部</el-button>
            </div>
          </template>
          <el-scrollbar height="290px">
            <el-table :data="recentFiles" style="width: 100%" :show-header="false">
              <el-table-column width="36">
                <template #default="scope">
                  <el-icon size="20px">
                    <component :is="getFileIcon(scope.row.type)" />
                  </el-icon>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="文件名">
                <template #default="scope">
                  <div class="file-info">
                    <div class="file-name">{{ scope.row.name }}</div>
                    <div class="file-meta">
                      <span>{{ scope.row.size }}</span>
                      <span class="meta-divider">|</span>
                      <span>{{ scope.row.date }}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="40">
                <template #default="scope">
                  <el-dropdown trigger="click">
                    <el-button link>
                      <el-icon><MoreFilled /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>
                          <el-icon><View /></el-icon>查看
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-icon><Download /></el-icon>下载
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-icon><Share /></el-icon>分享
                        </el-dropdown-item>
                        <el-dropdown-item divided>
                          <el-icon><Delete /></el-icon>删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </el-card>
      </el-col>

      <!-- 右侧面板 - 图表（占3格宽度） -->
      <el-col :span="18">
        <el-row :gutter="20">
          <!-- 对应上方的三个卡片，每个都是6格宽度 -->
          <el-col :span="8">
            <!-- 文件类型分布饼图 -->
            <el-card class="chart-card file-type-chart">
              <template #header>
                <div class="card-header">
                  <span>文件类型分布</span>
                  <el-button-group size="small">
                    <el-button type="primary" plain :class="{ active: chartDataType === 'count' }" @click="chartDataType = 'count'">
                      数量
                    </el-button>
                    <el-button type="primary" plain :class="{ active: chartDataType === 'size' }" @click="chartDataType = 'size'">
                      大小
                    </el-button>
                  </el-button-group>
                </div>
              </template>
              <div class="chart-container pie-chart">
                <!-- 饼图将在这里渲染 -->
                <div class="placeholder-chart">文件类型分布饼图</div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <!-- 存储空间使用趋势 -->
            <el-card class="chart-card storage-chart">
              <template #header>
                <div class="card-header">
                  <span>存储空间使用趋势</span>
                  <el-radio-group v-model="storageTimeRange" size="small">
                    <el-radio-button :value="'month'">月</el-radio-button>
                    <el-radio-button :value="'year'">年</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div class="chart-container line-chart">
                <!-- 图表将在这里渲染 -->
                <div class="placeholder-chart">存储空间使用趋势图</div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <!-- 上传数量图表 -->
            <el-card class="chart-card upload-chart">
              <template #header>
                <div class="card-header">
                  <span>上传数量趋势</span>
                  <el-radio-group v-model="timeRange" size="small">
                    <el-radio-button :value="'week'">周</el-radio-button>
                    <el-radio-button :value="'month'">月</el-radio-button>
                    <el-radio-button :value="'year'">年</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div class="chart-container line-chart">
                <!-- 图表将在这里渲染 -->
                <div class="placeholder-chart">上传数量趋势图</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- 第二行图表 -->
        <el-row :gutter="20" class="second-chart-row">
          <el-col :span="24">
            <!-- 文件访问热度图表 -->
            <el-card class="chart-card access-chart">
              <template #header>
                <div class="card-header">
                  <span>文件访问热度</span>
                  <el-radio-group v-model="accessTimeRange" size="small">
                    <el-radio-button :value="'week'">本周</el-radio-button>
                    <el-radio-button :value="'month'">本月</el-radio-button>
                    <el-radio-button :value="'year'">全年</el-radio-button>
                  </el-radio-group>
                </div>
              </template>
              <div class="chart-container bar-chart">
                <!-- 图表将在这里渲染 -->
                <div class="placeholder-chart">文件访问热度图表</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { showSuccess, showAlert } from '../layout/GlobalNotification.vue'
import {
  View,
  Delete,
  Download,
  Share,
  MoreFilled,
} from '@element-plus/icons-vue'

const username = ref('管理员')
const timeRange = ref('week')
const storageTimeRange = ref('month')
const accessTimeRange = ref('week')
const chartDataType = ref('count')

// 从localStorage获取用户信息
const initUserInfo = () => {
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    try {
      const userInfo = JSON.parse(userInfoStr)
      username.value = userInfo.nickname || userInfo.username || '管理员'
    } catch (e) {
      console.error('解析用户信息失败', e)
    }
  }
}

// 文件图标映射，根据文件类型返回对应的图标组件名
function getFileIcon(type: string): string {
  const iconMap: Record<string, string> = {
    doc: 'Document',
    xls: 'Grid',
    ppt: 'PieChart',
    pdf: 'Files',
    img: 'Picture',
    zip: 'Collection',
    folder: 'Folder',
    file: 'Document' // 默认文件图标
  };
  
  return iconMap[type] || 'Document';
}

// 组件挂载时初始化用户信息
initUserInfo()

// 统计卡片数据
const statsCards = reactive([
  { title: '文件总数', value: '1,286', icon: 'Files' },
  { title: '图片数量', value: '583', icon: 'Picture' },
  { title: '文档数量', value: '256', icon: 'Document' },
  { title: '总存储空间', value: '128GB', icon: 'Goods' }
]);

// 待办事项列表
const todoList = reactive([
  { content: '完成项目需求文档', completed: false, date: '今天' },
  { content: '审核设计方案', completed: true, date: '今天' },
  { content: '准备周报', completed: false, date: '明天' },
  { content: '团队会议', completed: false, date: '10-25' },
  { content: '测试新功能', completed: false, date: '10-26' }
]);

// 从localStorage加载待办事项
const loadTodos = () => {
  const storedTodos = localStorage.getItem('todoList')
  if (storedTodos) {
    try {
      const parsedTodos = JSON.parse(storedTodos)
      // 清空现有列表并添加存储的项目
      todoList.splice(0, todoList.length, ...parsedTodos)
    } catch (e) {
      console.error('解析待办事项失败', e)
    }
  }
}

// 保存待办事项到localStorage
const saveTodos = () => {
  localStorage.setItem('todoList', JSON.stringify(todoList))
}

// 初始化时加载待办事项
loadTodos()

// 添加新待办事项
const addNewTodo = () => {
  showAlert('请输入待办事项内容', '添加待办', {
    showInput: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  }).then(({ value }) => {
    if (value.trim()) {
      todoList.unshift({
        content: value.trim(),
        completed: false,
        date: '今天'
      });
      saveTodos(); // 保存到localStorage
      showSuccess('添加成功');
    }
  }).catch(() => {});
};

// 删除待办事项
function deleteTodo(index: number): void {
  const todoContent = todoList[index].content;
  todoList.splice(index, 1);
  saveTodos(); // 保存到localStorage
  showSuccess('删除成功');

}

// 切换待办事项状态
function toggleTodoStatus(index: number): void {
  // 任务状态已经被自动更新，这里可以添加额外的逻辑
  const status = todoList[index].completed ? '已完成' : '未完成';
  const todoContent = todoList[index].content;
  saveTodos(); // 保存到localStorage
  showSuccess(`任务状态已更新为${status}`);
}

// 最近操作文件
const recentFiles = reactive([
  { name: '需求分析文档.docx', type: 'doc', size: '2.3MB', date: '刚刚' },
  { name: '产品设计稿.pdf', type: 'pdf', size: '5.7MB', date: '10分钟前' },
  { name: '项目演示.pptx', type: 'doc', size: '8.2MB', date: '1小时前' },
  { name: '用户调研报告.xlsx', type: 'doc', size: '1.6MB', date: '2小时前' },
  { name: '团队合照.jpg', type: 'image', size: '3.4MB', date: '昨天' },
  { name: '宣传视频.mp4', type: 'video', size: '15.8MB', date: '昨天' },
  { name: '软件说明书.pdf', type: 'pdf', size: '4.2MB', date: '前天' }
]);
</script>

<style scoped>
.dashboard-content {
  width: 100%;
  padding: 5px 0;
}

/* 统计卡片样式 */
.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  height: 100px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #303133;
}

.stats-title {
  font-size: 14px;
  color: #606266;
}

.stats-icon {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 40px;
  opacity: 0.2;
  color: #409EFF;
}

/* 主内容区域 - 确保在可视区域内不需要滚动 */
.main-content-row {
  margin-bottom: 20px;
  min-height: 600px;
}

/* 第二行图表 */
.second-chart-row {
  margin-top: 10px; /* 减小上下图表之间的间距 */
}

/* 卡片通用样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #EBEEF5;
}

.card-header span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

/* 待办事项样式 */
.todo-card {
  margin-bottom: 10px; /* 减小间距 */
  height: 350px;
}

.todo-list {
  padding: 10px 15px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item .completed {
  text-decoration: line-through;
  color: #909399;
}

.todo-actions {
  display: flex;
  align-items: center;
}

.todo-date {
  font-size: 12px;
  color: #909399;
  margin-right: 10px;
}

.empty-placeholder {
  text-align: center;
  color: #909399;
  padding: 30px 0;
}

/* 最近操作文件样式 */
.recent-files-card {
  height: 350px;
  margin-top: 10px; /* 确保与上方待办事项保持一致的间距 */
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-size: 14px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  font-size: 12px;
  color: #909399;
}

.meta-divider {
  margin: 0 5px;
}

/* 图表样式 */
.chart-card {
  margin-bottom: 0; /* 移除底部边距 */
  height: 350px;
}

.upload-chart, .storage-chart, .file-type-chart {
  height: 350px;
}

.access-chart {
  height: 350px;
}

.chart-container {
  height: calc(100% - 50px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder-chart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 4px;
  color: #909399;
}

.pie-chart {
  padding: 20px;
}

.line-chart, .bar-chart {
  padding: 10px 20px 20px;
}

.active {
  font-weight: bold;
}

@media (max-height: 800px) {
  .stats-card {
    height: 80px;
  }
  
  .stats-value {
    font-size: 20px;
  }
  
  .todo-card, .upload-chart, .storage-chart, .file-type-chart {
    height: 300px; /* 响应式设计也增加高度 */
  }
  
  .recent-files-card, .access-chart {
    height: 300px; /* 响应式设计也增加高度 */
  }
}
</style>